import { useState, useRef, forwardRef, useImperativeHandle } from 'react';
import { Modal, Anchor, Row, Col } from 'antd';
import { ElementType } from '../config';
import { SvgIcon } from '@/components/icon';
import { createStyles } from 'antd-style';

const AddNodeModal = (_, ref) => {
  const [visible, setVisible] = useState(false);
  const [openParams, setOpenParams] = useState(null);
  const containerRef = useRef(null);
  const { styles } = useStyles()

  useImperativeHandle(ref, () => ({
    open: open,
  }));

  const handleClick = (e) => {
    e.preventDefault();
  };

  const flowNodes = [
    {
      name: '方法节点',
      type: ElementType.METHOD,
      icon: <SvgIcon icon="flow-IconAssign" />,
    },
    {
      name: '判断节点',
      type: ElementType.CONDITION,
      icon: <SvgIcon icon="flow-IconCondition" />,
    },
    {
      name: '赋值节点',
      type: ElementType.ASSIGN,
      icon: <SvgIcon icon="flow-IconAssign" />,
    },
    {
      name: '代码节点',
      type: ElementType.CODE,
      icon: <SvgIcon icon="flow-IconCode" />,
    },
  ];

  const flowDataNodes = [
    {
      name: 'MySql节点',
      type: ElementType.MYSQL,
      icon: <SvgIcon icon="flow-IconMysql" />,
    },
  ];

  const flowOtherNodes = [];

  const addNode = (item) => {
    const info = {
      name: item.name,
      elementType: item.type,
    };
    if (typeof openParams?.afterSelect === 'function') {
      openParams.afterSelect(info);
    }
    setVisible(false);
  };

  const open = (params) => {
    setVisible(true);
    setOpenParams(params);
  };

  return (
    <Modal
      open={visible}
      title=""
      className={styles + " design-add-node-modal"}
      width={500}
      closable={false}
      centered
      footer={null}
    >
      <Anchor
        affix={false}
        getContainer={() => containerRef.current}
        direction="horizontal"
        onClick={handleClick}
      >
        <Anchor.Link href="#baseNodes" title="基础节点" />
        <Anchor.Link href="#dataNodes" title="数据节点" />
      </Anchor>
      <div ref={containerRef} style={{ height: '300px', overflowY: 'auto' }}>
        <div id="baseNodes" className="node-types">
          <div className="node-type-name">基础节点</div>
          {flowNodes.map((item) => (
            <div
              key={item.type}
              className="node-type"
              onClick={() => addNode(item)}
            >
              <span>
                {item.icon}
                {/* <item.icon style={{ fontSize: '25px' }} /> */}
              </span>
              <span className="node-text">{item.name}</span>
            </div>
          ))}
        </div>

        <div id="dataNodes" className="node-types">
          <div className="node-type-name">数据节点</div>
          {flowDataNodes.map((item) => (
            <div
              key={item.type}
              className="node-type"
              onClick={() => addNode(item)}
            >
              {/* <item.icon style={{ fontSize: '25px' }} /> */}
              {item.icon}
              <span className="node-text">{item.name}</span>
            </div>
          ))}
        </div>
      </div>
    </Modal>
  );
};

const useStyles = createStyles(({ token, css }) => {
  return css`
    &.design-add-node-modal {
      .el-dialog__header {
        padding: 0;
        width: 100%;
        position: absolute;
        z-index: 1;
      }
      .el-dialog__headerbtn {
        height: 40px;
        width: 40px;
        top: 0;
      }
      .el-dialog__body {
        padding: 0;
      }
      .el-anchor__link {
        font-size: 15px;
      }
      .node-types {
        padding: 8px 0;
        display: flex;
        flex-direction: column;
        .anticon{
          font-size: 25px;
        }
      }
      .node-type-name {
        font-size: 18px;
        margin-bottom: 10px;
      }
      .node-type {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 8px;
        font-size: 14px;
        cursor: pointer;
        border: 1px solid ${token.colorBorder};
      }
      .node-text {
        margin: 10px 5px;
      }
    }
  `
})

export default forwardRef(AddNodeModal); 